<!-- 最近聊天列表 -->
<template>
    <div class="chat-list">
        <div class="title">聊天信息</div>
        <div class="chat-content scroll-bar-v">
            <!-- 最近的消息列表 -->
            <div :class=" 'chat' + (curSelectUserEmail === item.showUser.email ? ' chat-select':'') " 
                v-for="item in recentMsgList" :key="item.showUser.email"
                @click="selectContacts(item.showUser)">
                <div class="img-warp">
                    <img class="img" :src="item.showUser.avatar" fit="cover" lazy/>
                </div>
                <div class="info">
                    <div class="remark">{{item.remark}}</div>
                    <div class="msg">{{item.showMsg}}</div>
                </div>
                <div class="time">{{formatTime(item.sendTime)}}</div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import {Vue,Component} from 'vue-property-decorator'
import moment from 'moment'
import {MsgType} from '../conf'

@Component
export default class RecentChatListTab extends Vue {

    $message: any
    $notify: any
    $store: any

    // 当前选择的联系人邮箱信息
    public curSelectUserEmail:string = ''

    beforeMount() {
        moment.locale('zh-cn'); 
    } 

    // 选择联系人
    public selectContacts(user:any){
        this.curSelectUserEmail = user.email
        this.$emit('selectContacts', user)
    }

    // 处理最近消息,去除消息发送者，接受者，中不是当前登录用户的一方
    // 将其信息挂载到showUser上,并从好友信息中获取备注名，挂载到remark属性上
    private handleToShowMsg(msgList:any[]){
        const curUser = this.$store.state.user
        const friends = this.$store.state.friends
        // 处理后的消息列表
        const handleMsgList:any[] = []
        msgList.forEach(msg=>{
            // 挂载showUser,请一方数据替换为全局的userinfo,另一方替换为全局的friends中的匹配项
            let friend:any = null
            if(msg.sendUser.email === curUser.email){
                // 己方是消息发送方
                friend = friends.find((f:any) => f.user.email === msg.receiveUser.email)
                msg.sendUser = curUser
                if(typeof friend !== 'undefined'){
                    msg.receiveUser = friend.user
                    // 挂载showUser
                    msg.showUser = friend.user
                    // 挂载备注
                    msg.remark = friend.remark
                }else{
                    msg.showUser = msg.receiveUser
                    msg.remark = msg.receiveUser.name
                }
            }else{
                // 己方是消息接受方
                friend = friends.find((f:any) => f.user.email === msg.sendUser.email)
                msg.receiveUser = curUser
                if(typeof friend !== 'undefined'){
                    msg.sendUser = friend.user
                    msg.showUser = friend.user
                    msg.remark = friend.remark
                }else{
                    msg.showUser = msg.sendUser
                    msg.remark = msg.sendUser.name
                }
            }
            // 过滤其他形式的消息
            let filteredMsgContent = msg.content
            switch(msg.type){
                case MsgType.MSG_TYPE_PIC:
                    filteredMsgContent = '[图片消息]'
                    break
                case MsgType.MSG_TYPE_SOUND:
                    filteredMsgContent = '[音频消息]'
                    break
                case MsgType.MSG_TYPE_VIDEO:
                    filteredMsgContent = '[视频消息]'
                    break
                case MsgType.MSG_TYPE_FILE:
                    filteredMsgContent = '[文件消息]'
                    break
            }
            // 简略消息挂载到showMsg属性上
            this.$set(msg,'showMsg', filteredMsgContent)
            handleMsgList.push(msg)
        })
        return handleMsgList
    }

    // 格式化时间
    public formatTime(date:string){
        return moment(date).fromNow();
    }

    // 最近消息列表
    get recentMsgList(){
        const msgList = this.$store.state.recentMsgList
        return this.handleToShowMsg(msgList)
    }

    
}
</script>
<style lang="less" scoped>
@import '../css/index.less';
.chat-list{
    min-width: 200px;
    height: 100%;
    background: linear-gradient(to left bottom, rgb(236,236,236), rgb(240,240,240));
    border-right: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    .title{
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: #F7F7F7;
        border-bottom: 1px solid #ccc;
        padding-left: 10px;
    }
    .chat-content{
        flex:1;
        overflow-y: auto;
        .chat-select{
            background-color: #CAC8C6;
        }
        .chat {
            display: flex;
            align-items: center;
            padding: 10px;
            height: 64px;
            position: relative;
            &:hover:not(.chat-select){
                background-color: #DEDBDA;
            }
            .img-warp {
                .img {
                    width: 40px;
                    height: 40px;
                }
            }
            .info {
                flex: 1;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                margin-left: 10px;
                overflow: hidden;
                .remark {
                    font-size: 14px;
                    width: calc(100% - 50px);
                    overflow: hidden;
                    color: black;
                    font-weight: 600;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .msg {
                    font-size: 10px;
                    color: #999999;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    width: 100%;
                    overflow: hidden;
                }
            }
            .time{
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 10px;
                color: #999999;
            }
        }
    }
}
</style>